<template>
  <div>
    <van-sticky>
      <van-nav-bar class="bar_sty" left-text="BOSS直聘">
        <van-icon name="plus" @click="jobStateOpen" slot="right" />
        <van-icon name="search" slot="right" />
      </van-nav-bar>
      <notify v-show="notifyShow"></notify>
    </van-sticky>
    <div class="title_menu">
      <van-button class="miniBtn" size="mini" @click="notifyFn">
        推荐
      </van-button>
      <van-button class="miniBtn" size="mini" @click="notifyFn">
        最新
      </van-button>
      <van-button class="filterBtn" size="mini" @click="openFilterFn">
        筛选
      </van-button>
      <van-button class="filterBtn" size="mini" @click="openMaskFn">
        {{ default_City }}
      </van-button>
    </div>
    <div>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <job_Item
          v-for="(n, inx) in jobsData"
          :key="inx"
          :itemObj="n"
        ></job_Item>
      </van-pull-refresh>
    </div>
    <div
      v-show="isCityMask"
      :class="maskClassName"
      @touchmove.prevent
      @mousewheel.prevent
    >
      <selectCity @closeBlock="closeMaskFn($event)"></selectCity>
    </div>
    <!-- filter -->
    <div
      v-show="is_filter"
      :class="filterClassName"
      @touchmove.prevent
      @mousewheel.prevent
    >
      <filterCond @closeFilterWrap="closeFilterWrapFn"></filterCond>
    </div>
    <div
      v-show="is_jobState"
      :class="jobStateClassName"
      @touchmove.prevent
      @mousewheel.prevent
    >
      <jobState @closeJobStateFn="jobStateClose"></jobState>
    </div>
    <footBar />
  </div>
</template>
<script>
import job_Item from "./job_Item.vue";
import footBar from "./footBar.vue";
import notify from "./notify.vue";
import selectCity from "./selectCity.vue";
import filterCond from "./filterCond.vue";
import jobState from "./jobState.vue";
export default {
  name: "jobList",
  components: { job_Item, footBar, notify, selectCity, filterCond, jobState },
  data() {
    return {
      msg: "职位列表",
      notifyShow: false,
      isLoading: false,
      isCityMask: false,
      is_jobState: false,
      maskClassName: "mask",
      default_City: "城市",
      is_filter: false,
      filterClassName: "filter_mask",
      jobStateClassName: "mask_animation",
      jobsData: [
        {
          title: "web前端",
          h2_txt: "什么祥 未融资",
          area: ["沈阳 和平区", "经验不限", "本科"],
          hr: {
            img_avatar: "",
            hr_txt: "海峰-招聘者",
          },
          salary: "5-6K",
        },
        {
          title: "软件开发工程师",
          h2_txt: "牛万科技 未融资",
          area: ["沈阳 沈河区", "1-3年", "学历不限"],
          hr: {
            img_avatar: "",
            hr_txt: "海峰-招聘者",
          },
          salary: "3-8K",
        },
        {
          title: "前端工程师",
          h2_txt: "成林健康科技 未融资",
          area: ["沈阳 皇姑区", "经验不限", "本科"],
          hr: {
            img_avatar: "",
            hr_txt: "马xx-从事招聘专员",
          },
          salary: "5-6K",
        },
        {
          title: "前端开发工程师",
          h2_txt: "师福教育 未融资",
          area: ["沈阳 沈河区", "3-5年", "学历不限"],
          hr: {
            img_avatar: "",
            hr_txt: "杨女士 - 人事",
          },
          salary: "5-8K",
        },
        {
          title: "前端工程师",
          h2_txt: "成林健康科技 未融资",
          area: ["沈阳 皇姑区", "经验不限", "本科"],
          hr: {
            img_avatar: "",
            hr_txt: "马xx-从事招聘专员",
          },
          salary: "5-6K",
        },
        {
          title: "前端技术经理",
          h2_txt: "星擎科技 未融资",
          area: ["沈阳 铁西区", "5-10年", "本科"],
          hr: {
            img_avatar: "",
            hr_txt: "潘舒-CEO",
          },
          salary: "6-11K",
        },
        {
          title: "web前端",
          h2_txt: "什么祥 未融资",
          area: ["沈阳 和平区", "经验不限", "本科"],
          hr: {
            img_avatar: "",
            hr_txt: "海峰-招聘者",
          },
          salary: "5-6K",
        },
      ],
    };
  },
  methods: {
    notifyFn() {
      this.notifyShow = true;
      let _notify = document.querySelector(".notify");
      _notify.addEventListener(
        "webkitAnimationEnd",
        () => (this.notifyShow = false)
      );
    },
    onRefresh() {
      this.$toast("刷新成功");
      this.isLoading = false;
    },
    openMaskFn() {
      this.isCityMask = true;
      this.maskClassName = "mask cityEditWrapObj_open";
      let _mask = document.querySelector(".mask");
      _mask.addEventListener(
        "webkitAnimationEnd",
        () => (this.isCityMask = true),
        false
      );
    },
    closeMaskFn(_cityName) {
      if (_cityName != null) {
        this.default_City = _cityName;
      }
      this.maskClassName = "mask cityEditWrapObj_close";
      let _mask = document.querySelector(".mask");
      _mask.addEventListener(
        "webkitAnimationEnd",
        () => (this.isCityMask = false),
        false
      );
    },
    openFilterFn() {
      this.is_filter = true;
      this.filterClassName = "filter_mask filter_open";
      let _mask = document.querySelector(".filter_mask");
      _mask.addEventListener(
        "webkitAnimationEnd",
        () => (this.is_filter = true),
        false
      );
    },
    closeFilterWrapFn() {
      this.filterClassName = "filter_mask filter_close";
      let _mask = document.querySelector(".filter_mask");
      _mask.addEventListener(
        "webkitAnimationEnd",
        () => (this.is_filter = false),
        false
      );
    },
    jobStateOpen() {
      this.is_jobState = true;
      this.jobStateClassName = "mask_animation animation_open";
      let _mask = document.querySelector(".mask_animation");
      _mask.addEventListener(
        "webkitAnimationEnd",
        () => (this.is_jobState = true),
        false
      );
    },
    jobStateClose() {
      this.jobStateClassName = "mask_animation animation_close";
      let _mask = document.querySelector(".mask_animation");
      _mask.addEventListener(
        "webkitAnimationEnd",
        () => (this.is_jobState = false),
        false
      );
    },
  },
};
</script>
<style scoped>
.bar_sty {
  background: #14c1bb;
}
.van-icon-plus:before {
  color: #fff;
  font-size: 0.4rem;
  margin-right: 0.1rem;
  border-right: 1px solid #c1c1c1;
  padding-right: 0.1rem;
}
.van-icon-search:before {
  color: #fff;
  font-size: 0.4rem;
}
.van-nav-bar__text {
  font-size: 0.35rem;
  color: #fff;
}
.miniBtn {
  border: 0;
  margin: 0.1rem 0 0 0;
  float: left;
}
.filterBtn {
  float: right;
  border: 0;
  margin: 0.1rem 0.1rem 0 0;
  background: #f2f3f5;
}
.title_menu {
  background: #fff;
  height: 0.6rem;
}
.cityEditWrapObj_open {
  width: 100%;
  height: 100%;
  background: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3333;
  animation: cityEditWrapObjAnimation_open 0.7s;
}
.cityEditWrapObj_close {
  width: 100%;
  height: 100%;
  background: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3333;
  animation: cityEditWrapObjAnimation_close 0.7s;
}
.filter_open {
  width: 100%;
  height: 100%;
  background: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3333;
  animation: cityEditWrapObjAnimation_open 0.7s;
}
.filter_close {
  width: 100%;
  height: 100%;
  background: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3333;
  animation: cityEditWrapObjAnimation_close 0.7s;
}
@keyframes cityEditWrapObjAnimation_open {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}
@keyframes cityEditWrapObjAnimation_close {
  from {
    height: 100%;
  }
  to {
    height: 0;
  }
}

.mask_animation {
  width: 100%;
  height: 100%;
  background: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3333;
}
.animation_open {
  animation: open_Animation 0.7s;
}
.animation_close {
  animation: close_Animation 0.7s;
}

@keyframes open_Animation {
  from {
    width: 0;
    left: 100%;
  }
  to {
    width: 100%;
    left: 0;
  }
}
@keyframes close_Animation {
  from {
    width: 100%;
    left: 0;
  }
  to {
    width: 0;
    left: 100%;
  }
}
</style>